<template>
	<view class="custom-actions">
		<view class="content">
			<view class="action-item" v-for="(item, index) in actionList" :key="index">
				<image class="icon-img" :src="item.pic" mode="widthFix"></image>
				<view class="action-item-name">
					{{ item.name }}
				</view>
			</view>
			<view class="action-btn">
				<u-button shape="circle" :plain="true" color="#f0ad4e" text="评论"></u-button>
			</view>
			<view class="action-btn">
				<u-button shape="circle" color="#f0ad4e" text="我要报名" ></u-button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	components: {},
	data() {
		return {
			actionList:[
				{
					name: '分享',
					pic: '/static/images/share.png',
				},
				{
					name: '收藏',
					pic: '/static/images/collect-off.png',
					select: '/static/images/collect-on.png',
				},
			]
		}
	},
	onLoad() {},
	methods: {
		
	}
}
</script>
<style lang="scss" scoped>

.custom-actions{
    position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0px 2px 18px 0px #4E507C1A;
	width: 100vw;
	height: 80px;
	background: #fff;
	padding: 0 10px;
	box-sizing: border-box;
	z-index: 9;
	.content{
		display: flex;
		align-items: center;
		height: 100%;
		.action-btn{
			flex: 1;
			margin: 0 5px;
		}
		.action-item{
			@include flexBetween;
			flex-direction: column;
			width: 16%;
			.action-item-name{
				margin-top: 5px;
			}
			.icon-img{
				width: 20px;
			}
		}
	}
}
</style>
